<template>
  <div class="postlist">
    <!-- 面包屑部分 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/postPublish' }">文章发布</el-breadcrumb-item>
      <el-breadcrumb-item>文章列表</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 中间表格部分 -->
    <el-table :data="postList" style="width: 100%;margin-top:20px" border>
      <el-table-column type="index" width="50"></el-table-column>
      <el-table-column prop="title" label="标题" width="520"></el-table-column>
      <el-table-column label="时间" width="220">
        <!-- 日期时间改造 -->
        <template slot-scope="scope">{{scope.row.user.create_date | getDate('-',':') }}</template>
      </el-table-column>
      <el-table-column label="类型" width="80">
        <!-- 文章类型改造 -->
        <template slot-scope="scope">{{scope.row.type === 1 ? '文章' : '视频'}}</template>
      </el-table-column>
      <el-table-column prop="user.nickname" label="作者" width="120"></el-table-column>
      <!-- 自己操作部分 -->
      <el-table-column label="操作">
        <!-- 自定义模板（可以拿到当行的数据对象） -->
        <!-- 凡事涉及到数据处理的 一定需要添加自定义模板列 -->
        <template slot-scope="scope">
          <!-- 轻文字提示 -->
          <el-tooltip class="item" effect="dark" content="编辑" placement="top">
            <!-- 按钮 -->
            <el-button type="primary" icon="el-icon-edit" @click="edit(scope.row)"></el-button>
          </el-tooltip>

          <el-tooltip class="item" effect="dark" content="分享" placement="top">
            <el-button type="warning" icon="el-icon-share" @click='share(scope.row)'></el-button>
          </el-tooltip>

          <el-tooltip class="item" effect="dark" content="删除" placement="top">
            <el-button type="danger" icon="el-icon-delete" @click="del(scope.row)"></el-button>
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页部分 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pageIndex"
      :page-sizes="[2, 4, 6]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total "
    ></el-pagination>
    <!-- 分享弹框部分 -->
    <el-dialog title="分享文章" :visible.sync="shareDialogFormVisible">
      <el-form :model="shareForm">
        <el-form-item label="分享作者" :label-width="'100px'">
          <el-input v-model="shareForm.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="分享内容" :label-width="'100px'">
          <el-select  placeholder="请选择活动内容">
            <el-option label="分享标题" :value="shareForm.title" ></el-option>
            <el-option label="分享内容" ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="shareDialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="shareDialogFormVisible = false">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getArticleList } from '../apis/article';
export default {
  data() {
    return {
      postList: [],
      pageIndex: 1,
      pageSize: 2,
      total: 20,
      shareDialogFormVisible: false,
      shareForm: {
        name: '佩佩',
        title: ''
      }
    };
  },
  methods: {
    // 封装获取服务器文章数据的方法
    async init() {
      let res = await getArticleList({
        pageIndex: this.pageIndex,
        pageSize: this.pageSize
      });
      this.postList = res.data.data;
      this.total = res.data.total;
      console.log(res);
    },
    // 改变每页条数触发
    handleSizeChange(val) {
      this.pageSize = val;
      this.init();
    },
    // 改变显示在哪一页触发
    handleCurrentChange(val) {
      this.pageIndex = val;
      this.init();
    },
    // 点击编辑跳转到文章发表页面（实现内容复用） slot-scope="scope"设置这个属性 获取当行的数据
    edit(row) {
      console.log(row);
      let id = row.id
      this.$router.push({ path: `postPublish/${id}` })
    },
    // 实现点击删除弹框
    del(row) {
      this.$confirm(`此操作将永久删除id为${row.id}, 是否继续?`, '删除提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
    },
    // 点击分享按钮的弹框
    share(row) {
      console.log(row)
      this.shareDialogFormVisible = true
      this.shareForm.name = row.user.nickname
      this.shareForm.title = row.title
    }
  },
  async mounted() {
    //  获取数据库数据
    this.init();
  },
  //  日期过滤器
  filters: {
    getDate(time, spe, spo) {
      let date = new Date(time);
      let year = date.getFullYear();
      let mon = date.getMonth() + 1;
      let day = date.getDate();
      let hour = date.getHours();
      let min = date.getMinutes();
      let sec = date.getSeconds();
      return `${year}${spe}${mon}${spe}${day}  ${hour}${spo}${min}${spo}${sec}`;
    }
  }
};
</script>

<style lang='less' scoped>
.el-pagination {
  position: absolute;
  bottom: 136px;
  left: 50%;
  transform: translateX(-50%);
}
</style>
